<template>
    <div>
        <div
            class="chart-wrapper"
            ref="chartBox"
            v-show="chartData.length > 0"
            style="width: 760px;height: 200px"
        ></div>
        <el-empty
            description="暂无数据"
            v-show="chartData.length == 0"
            :image-size="60"
            style="height: 200px;box-sizing:border-box;"
        />
    </div>
</template>

<script setup>
import { debounce } from "@/utils/util.js";
import * as echarts from "echarts";
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const type = route.query.type;
const hHeight = ref(0);
const isFullscreen = ref(false);
const chartBox = ref();
let myChart = ref(null);

// 传入数据
const props = defineProps({
    chartData: {
        type: Array,
        default: [],
    },
});

const resizeHandler = debounce(() => {
    if (myChart) {
        myChart.resize();
    }
}, 200);

onMounted(() => {
    setTimeout(() => {
        if (props.chartData.length == 0) return;
        getChartData();
    }, 1000);
    isFullscreenFn();
    window.addEventListener("resize", resizeHandler);
    window.addEventListener("resize", isFullscreenFn);
    nextTick(() => {
        if (type != "app") {
            hHeight.value = document.documentElement.clientHeight - 830;
            console.log("zhelizhelizheli", hHeight.value);
        } else {
            hHeight.value = 200;
        }
    });
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler);
    window.removeEventListener("resize", isFullscreenFn);
});

watch(
    () => props.chartData,
    (newVal, oldVal) => {
        getChartData();
    }
);

const isFullscreenFn = () => {
    // 利用屏幕分辨率和window对象的内高度来判断兼容IE
    let winFlag = window.innerHeight === window.screen.height;
    // 利用window全屏标识来判断 -- IE无效
    let isFull = window.fullScreen || document.webkitIsFullScreen;

    if (isFull === undefined) {
        isFullscreen.value = winFlag;
    } else {
        isFullscreen.value = winFlag || isFull;
    }
    // console.log('1111111', winFlag);  // true全屏   false不是全屏
};

const getChartData = () => {
    let seriesData = []
    props.chartData.sort((a, b) => a.multiplyValue - b.multiplyValue)
    props.chartData.forEach(item => {
        seriesData.push([item.multiplyValue, item.yAxisValue])
    })
    nextTick(() => {
        initEcharts(seriesData);
    });
};
const initEcharts = (seriesData) => {
    myChart = echarts.init(chartBox.value);
    let option = {
        grid: {
            top: "12%",
            left: "4%",
            right: "4%",
            bottom: "12%",
            containLabel: true,
        },
        tooltip: {
            show: false,
            trigger: "axis",
        },
        legend: {
            show: false,
        },
        xAxis: [
            {
                gridIndex: 0, min: seriesData[0][0], max: seriesData[seriesData.length - 1][0],
                axisLine: {
                    lineStyle: {
                        color: "#999",
                    },
                },
            },
        ],
        yAxis: [
            {
                gridIndex: 0, min: seriesData[0][1], max: seriesData[seriesData.length - 1][1],
                axisLine: {
                    lineStyle: {
                        color: "#999",
                    },
                },
            },
        ],
        series: [
            {
                name: 'I',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: seriesData,
                color: '#F3D443',
                markLine: {
                    animation: false,
                    lineStyle: {
                        type: 'solid',
                        color: '#58be3f'
                    },
                    data: [
                        [
                            {
                                coord: seriesData[0],
                                symbol: 'none'
                            },
                            {
                                coord: seriesData[seriesData.length - 1],
                                symbol: 'none'
                            }
                        ]
                    ]
                }
            },
        ],
    };
    if (props.option) {
        option = Object.assign(option, props.option);
    }
    myChart.off("click");
    // myChart.on("click", function (params) {
    //     that.$emit("clickEchartIns", params); // 所选参数
    // });
    myChart.setOption(option, true);
};
</script>

<style scoped lang="less"></style>
